<template>
  <!-- 博客详情 -->
  <el-row :gutter="20">
    <el-col :sm="3" class="hidden-xs-only" style="opacity: 0">左侧占位</el-col>
    <el-col :xs="24" :sm="18">
      <el-card
        style="background-color: rgba(255, 255, 255, 1)"
        class="first-card"
      >
        <div slot="header" class="total blog-info">
          <div class="user-info">
            <i class="el-icon-user"></i>
            <span class="header"> {{ blog.createBy }}</span>
          </div>
          <div class="blog-date">
            <i class="el-icon-date"></i>
            <span> {{ blog.createTime }}</span>
          </div>
          <div class="blog-views">
            <i class="el-icon-view"></i>
            <span> {{ blog.views }}</span>
          </div>
        </div>
        <h2 class="blog-title header">
          {{ blog.title }}
          <el-tag
            size="mini"
            v-for="tag in blog.types"
            :key="tag.typeId"
            type="info"
            >{{ tag.typeName }}</el-tag
          >
        </h2>
        <div
          v-if="blog.contentType === '1'"
          class="typo m-padded-lr-responsive m-padded-tb-large ql-editor"
          v-html="blog.content"
        ></div>
        <div v-if="blog.contentType === '3'" v-html="blog.content"></div>
        <CherryMarkdown
          ref="CherryMarkdown"
          v-if="blog.contentType === '2'"
          v-model="blog.contentMarkdown"
          :defaultModel="'previewOnly'"
        ></CherryMarkdown>
        <div class="tags">
          <div class="tag-item" v-for="tag in blog.tags" :key="tag.tagId">
            <div class="sjx-outer">
              <div class="sjx-inner"></div>
            </div>
            <div class="tag">
              {{ tag.tagName }}
            </div>
          </div>
        </div>

        <!-- 点赞 -->
        <div class="control" style="border-top: 1px solid rgba(0, 0, 0, 0.1);">
          <div class="like" :class="{ active: isLiked }" @click="toggleLike">
            <svg-icon icon-class="like" style="margin-right: 0px;" />
            <!-- 点赞图标 -->
            <span>点赞</span>
            <span class="like-num">{{ likesCount }}</span>
          </div>
        </div>

        <div class="author">
          <ul>
            <li>作者 {{ blog.createBy }}</li>
            <li>发表时间 {{ blog.createTime }}</li>
          </ul>
        </div>
        <el-card shadow="never" class="comments">
          <div class="header" style="padding-bottom: 10px">评论</div>
          <comment></comment>
        </el-card>
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="0"></el-col>
    <el-col :sm="3" class="hidden-xs-only" style="opacity: 0">右侧占位</el-col>
    <!-- 设置底部距离的 -->
    <el-backtop :bottom="60">
      <div
        style="
          height: 50px;
          width: 50px;
          background-color: rgba(240, 239, 241, 1);
          box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
          text-align: center;
          line-height: 40px;
          border-radius: 2px;
          color: #1989fa;
        "
      >
        <svg-icon icon-class="top" />
      </div>
    </el-backtop>
  </el-row>
</template>

<script>
// import 'cherry-markdown/dist/cherry-markdown.min.css'
//使用prism.js代码高亮
import "@/views/cms/plugins/prism.js";
import "@/views/cms/plugins/prism.css";
import comment from "./comment/Ipcomment";
import { getBlogDetail, addBlogViews } from "@/api/cms/blog";
import { mapState } from "vuex";
import CherryMarkdown from "@/components/CherryMarkdown";

export default {
  components: {
    comment,
    CherryMarkdown,
  },
  data() {
    return {
      blog: {},
      commentForm: {
        content: "",
      },
      isLiked: false, // 用于跟踪点赞状态
      likesCount: 0,  // 用于追踪点赞数量
    };
  },
  watch: {
    $route(to, from) {
      this.$router.go(0);
    },
  },
  created() {
    this.getBlogInfomation();
    this.loadLikesFromLocalStorage(); // 从本地存储加载点赞信息
  },
  computed: {
    ...mapState(["userInfo", "administrator"]),
  },
  methods: {    // 获取博客详情信息
    async getBlogInfomation() {
      // 增加阅读量
      addBlogViews(this.$route.query.id);
      getBlogDetail(this.$route.query.id).then((response) => {
        console.log("response", response);

        this.blog = response.data;
        this.blog.blogFilesNew = [];
        if (response.data.blogFiles !== null) {
          this.blog.blogFilesNew = JSON.parse(response.data.blogFiles);
        }
      });
    },
    // 从本地存储加载点赞信息
    loadLikesFromLocalStorage() {
      const blogId = this.$route.query.id;
      const storedLikes = localStorage.getItem(`blog_likes_${blogId}`);
      if (storedLikes) {
        const { isLiked, likesCount } = JSON.parse(storedLikes);
        this.isLiked = isLiked;
        this.likesCount = likesCount;
      }
    },
    // 保存点赞信息到本地存储
    saveLikesToLocalStorage() {
      const blogId = this.$route.query.id;
      const likesData = JSON.stringify({ isLiked: this.isLiked, likesCount: this.likesCount });
      localStorage.setItem(`blog_likes_${blogId}`, likesData);
    },
    // 切换点赞状态
    toggleLike(event) {
      if (event.detail === 1) { // 单击
        if (!this.isLiked) {
          this.likesCount++;
          this.isLiked = true;
        }
      } else if (event.detail === 2) { // 双击
        if (this.isLiked && this.likesCount > 0) {
          this.likesCount--;
          this.isLiked = false;
        }
      }
      this.saveLikesToLocalStorage(); // 保存点赞信息到本地存储
    },
  },
};
</script>

<style scoped>
.el-card {
  width: 100%;
}

.el-popper /deep/ {
  box-shadow: 0 2px 4px 0 rgb(34 36 38 / 12%);
}

.first-card {
  border-radius: 10px 10px 10px 10px;
  position: relative;
  padding-bottom: 10px;
  /*text-align: center;*/
  font: 300 1em/1.8 PingFang SC, Lantinghei SC, Microsoft Yahei,
    Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
}

hr.style-one {
  width: 100%;
  background-image: linear-gradient(
    to right,
    rgba(64, 158, 255, 0),
    rgba(64, 158, 255, 0.75),
    rgba(64, 158, 255, 0)
  );
}

.appreciate {
  text-align: center;
}

.tags {
  display: flex;
  align-items: center;
  margin-left: 50px;
  margin-top: 20px;
}

.tag-item {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-left: 10px;
  margin-bottom: 20px;
}

.tag {
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 5px;
  background-color: #ecf5ff;
  border: 1px solid #409eff;
  color: #409eff;
  display: flex;
}

.sjx-outer {
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #409eff;
  position: relative;
}

.sjx-inner {
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #ecf5ff;
  top: -7px;
  left: 1px;
  position: absolute;
}

.author {
  text-align: left;
  background-color: #fcfff5;
  box-shadow: 0 0 0 1px #a3c293 inset;
  color: #2c662d;
  width: 100%;
  position: absolute;
  left: 0;
  margin: 20px 0;
  padding: 20px 0;
  font-size: small;
  font-family: PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB,
    Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
}

.comments {
  margin-top: 150px;
  box-shadow: 0 1px 2px 0 rgb(34 36 38 / 15%);
  border: 1px solid rgba(34, 36, 38, 0.15);
  border-top: 2px solid #409eff;
  text-align: left;
}
.blog-title {
  text-align: center;
}

.blog-info {
  display: flex;
  align-items: center;
  color: rgba(0, 0, 0, 0.4);
  font-size: 13px;
}
.blog-date {
  margin-right: 5px;
  float: right;
}

.blog-views {
  margin-right: 5px;
  float: right;
}

.user-info {
  justify-content: space-around;
  align-items: center;
  margin-right: 15px;
  float: left;
}

.header {
  text-decoration: none;
  color: #3a8ee6;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .tags {
    margin-left: 0;
    margin-top: 20px;
  }

  hr {
    display: none;
  }

  .comment-content {
    font-size: 12px !important;
  }
}

@media only screen and (max-width: 480px) {
  h2 {
    font-weight: normal;
  }

  code,
  pre {
    font-size: 13px !important;
  }
}
.blogFilesInfoName {
  text-align: center;
  padding-top: 5px;
}

.control {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #909399;
  .like {
    display: flex;
    align-items: center;
    margin-right: 20px;
    cursor: pointer;
    &.active,
    &:hover {
      color: #409eff;
    }
    .iconfont {
      font-size: 14px;
      margin-right: 5px;
    }
  }
  .comment-reply {
    display: flex;
    align-items: center;
    cursor: pointer;
    &:hover {
      color: #333;
    }
    .iconfont {
      font-size: 16px;
      margin-right: 5px;
    }
  }
}

.like.active .iconfont {
  color: #409EFF; /* 当点赞时改变图标颜色 */
  background-color: blue;
}
</style>
